import React, {PureComponent} from 'react';
import {Table, Card} from 'antd';
import PropTypes from 'prop-types';
import {
    TABLE,
    DATE_FORMAT,
    COMMON_TABLE_QUERY_FAIL_TEXT,
    COMMON_TABLE_EMPTY_TEXT} from '../constants';
import {injectIntl, formatMessage} from './intl';
import {formatPercent, formatDateTime} from '../utils';
export class TablePanel extends PureComponent {
    state = {
        loading: false
    };
    render() {
        const {data, loading, hasError} = this.props;
        const columns = [{
            title: formatMessage({
                id: 'tablePanel.column.sernum',
                defaultMessage: '序号'
            }),
            dataIndex: 'sernum',
            render: (t, d, i) => i + 1
        }, {
            title: formatMessage({
                id: 'tablePanel.column.region',
                defaultMessage: '区域'
            }),
            dataIndex: 'region'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.dealerCode',
                defaultMessage: '总代'
            }),
            dataIndex: 'dealerCode'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.market',
                defaultMessage: '市场'
            }),
            dataIndex: 'market'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.submitData',
                defaultMessage: '年月'
            }),
            dataIndex: 'submitData',
            render: text => formatDateTime(text, DATE_FORMAT),
        }, {
            title: formatMessage({
                id: 'tablePanel.column.submitNum',
                defaultMessage: '提交数量'
            }),
            dataIndex: 'submitNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.acceptNum',
                defaultMessage: '接受数量'
            }),
            dataIndex: 'acceptNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.returnNum',
                defaultMessage: '退回数量'
            }),
            dataIndex: 'returnNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.claimsRejectNum',
                defaultMessage: '拒赔数量'
            }),
            dataIndex: 'claimsRejectNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.monthEndNum',
                defaultMessage: '本月未审数'
            }),
            dataIndex: 'monthEndNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.crossMonthNum',
                defaultMessage: '跨月数量'
            }),
            dataIndex: 'crossMonthNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.onePassNum',
                defaultMessage: '一次通过数'
            }),
            dataIndex: 'onePassNum'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.onePassRate',
                defaultMessage: '一次通过率'
            }),
            dataIndex: 'onePassRate',
            render: t => formatPercent(t)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.passRate',
                defaultMessage: '通过率'
            }),
            dataIndex: 'passRate',
            render: t => formatPercent(t)
        }, {
            title: formatMessage({
                id: 'tablePanel.column.preSettlementTime',
                defaultMessage: '预结算时间'
            }),
            dataIndex: 'preSettlementTime',
            render: text => formatDateTime(text, DATE_FORMAT),
        }, {
            title: formatMessage({
                id: 'tablePanel.column.settlementTime',
                defaultMessage: '结算时间'
            }),
            dataIndex: 'settlementTime',
            render: text => formatDateTime(text, DATE_FORMAT),
        }, {
            title: formatMessage({
                id: 'tablePanel.column.PIUploadTime',
                defaultMessage: 'PI上传日期'
            }),
            dataIndex: 'PIUploadTime',
            render: text => formatDateTime(text, DATE_FORMAT),
        }, {
            title: formatMessage({
                id: 'tablePanel.column.reportToFinanceTime',
                defaultMessage: '上报财务时间'
            }),
            dataIndex: 'reportToFinanceTime',
            render: text => formatDateTime(text, DATE_FORMAT),
        }, {
            title: formatMessage({
                id: 'tablePanel.column.accountTime',
                defaultMessage: '挂账日期'
            }),
            dataIndex: 'accountTime',
            render: text => formatDateTime(text, DATE_FORMAT),
        }, {
            title: formatMessage({
                id: 'tablePanel.column.settlementCycle',
                defaultMessage: '结算周期'
            }),
            dataIndex: 'settlementCycle'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.materialFee',
                defaultMessage: '材料费用'
            }),
            dataIndex: 'materialFee'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.materialManagementFee',
                defaultMessage: '材料管理费'
            }),
            dataIndex: 'materialManagementFee'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.workingHoursFee',
                defaultMessage: '工时费用'
            }),
            dataIndex: 'workingHoursFee'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.accessoriesFee',
                defaultMessage: '辅料费用'
            }),
            dataIndex: 'accessoriesFee'
        }, {
            title: formatMessage({
                id: 'tablePanel.column.settlementAmount',
                defaultMessage: '当月结算金额'
            }),
            dataIndex: 'settlementAmount'
        }];
        const locale = {
            emptyText: hasError ? COMMON_TABLE_QUERY_FAIL_TEXT : COMMON_TABLE_EMPTY_TEXT
        };
        return (
            <Card>
                <Table
                    className="white-space-nowrap"
                    columns={columns}
                    dataSource={data}
                    rowKey="id"
                    pagination={false}
                    loading={loading || this.state.loading}
                    locale={locale}
                    {...TABLE}/>
            </Card>
        );
    }
}

TablePanel.propTypes = {
    conditions: PropTypes.object.isRequired,
    data: PropTypes.array.isRequired,
    hasError: PropTypes.string.isRequired,
    loading: PropTypes.bool.isRequired,
    intl: PropTypes.object,
};
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
const getData = selectorFactory(['page', 'domainData', 'list', 'data']);
const getConditions = selectorFactory(['page', 'appState', 'queryCondition']);
const mapStateToProps = state => ({
    data: getData(state),
    conditions: getConditions(state),
    loading: state.getIn(['page', 'domainData', 'list', 'isFetching']),
    hasError: state.getIn(['page', 'domainData', 'list', 'hasError']),
});

import {connect} from 'react-redux';
export default connect(mapStateToProps, null)(injectIntl(TablePanel));
